﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="InputVerificationPage.aspx.cs" Inherits="FBKPI.Pages.InputVerificationPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
    $(document).ready(function () {
        mainmenu("#nav ul", "#nav li");
        mainmenu("#menu_wrap ul", "#menu_wrap li");

        $('.date-picker').datepicker({
            changeMonth: true,
            changeYear: true,
            showYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function (dateText, inst) {
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
            }
        });

        InitPage();

        $("#btn_back").click(function () {
            document.location = "../Pages/VerificatePage.aspx?User=" + $("#txt_user").val();
            return false;
        });

        $("#btn_count").click(function () {
            if ($("#MainContent_txt_realization").val() != '') {
                var Realization;
                var Max = ($("#MainContent_txt_kpiuommax").val().split(' || '))[1].toString();
                var Min = ($("#MainContent_txt_kpiuommin").val().split(' || '))[1].toString();
                var Score;

                if ($("#MainContent_txt_uomformat").val() == 'Month') {
                    Realization = $("#MainContent_txt_realizationmonth").val();
                    if (Realization == Max) Score = 100;
                    else if (Realization == Min) Score = 80
                    else Score = 0;
                } else if ($("#MainContent_txt_uomformat").val() == 'Numeric') {
                    Realization = $("#MainContent_txt_realization").val();
                    if (Realization - Max > 0) Score = 100;
                    else if (Realization - Min > 0) Score = 80
                    else Score = 0;
                } else {
                    Realization = $("#MainContent_txt_realization").val();
                    if (Realization == Max) Score = 100;
                    else if (Realization == Min) Score = 80
                    else Score = 0;
                }


                $("#MainContent_txt_score").val(Score);
                $("#MainContent_txt_scoreval").val(Score);
            } else alert('Please enter Realization');
            return false;
        });

        //datatable section
        $("#KPIChildTable").dataTable({
            "oLanguage": {
                "sZeroRecords": "No records to display",
                "sSearch": "Search"
            },
            "bSort": false,
            "sSearch": false,
            "bPaginate": true,
            "bAutoWidth": false,
            "bProcessing": true,
            "bServerSide": true,
            "bDestroy": true,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bDeferRender": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "../Serializer/KPIChildExpandSerializer.ashx?User=" + $("#txt_user").val() + "&KPIParent=" + $("#MainContent_KPI").val(),
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns": [{
                "mData": "No"
            }, {
                "mData": "Description"
            }, {
                "mData": "isActive"
            }, {
                "mData": "GroupKPI"
            }, {
                "mData": "CategoryKPI"
            }, {
                "mData": "TypeKPI"
            }, {
                "mData": "SubTypeKPI"
            }, {
                "mData": "Periode"
            }, {
                "mData": "ID"
            }],
            "aoColumnDefs": [{
                "fnRender": function (oObj) {
                    return "<a href=\"#\" onclick=\"ShowAttachments('" + oObj.aData["ID"] + "')\"><img src='../images/detail.png' /></a>";
                },
                "aTargets": [8]
            }, {
                "fnRender": function (oObj) {
                    if (oObj.aData["isActive"] == 'True') {
                        return "<img src='../images/check.png' />"
                    } else {
                        return "<img src='../images/cross.png' />"
                    }
                },
                "aTargets": [2]
            }, {
                "sClass": "center",
                "aTargets": [0, 2, 8]
            }]
        });


        if ($("#MainContent_txt_achievementyear").val() != '') {
            $("#timeline").show();
            $("#timeline").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                },
                "bFilter": false,
                "bInfo": false,
                "bSort": false,
                "bPaginate": false,
                "bAutoWidth": false,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "bJQueryUI": true,
                "bDeferRender": true,
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "type": "GET",
                        "url": "../Serializer/KPIAchievementTableSerializer.ashx?KPIAssign=" + $("#MainContent_KPIAssign").val() + "&Year=" + $("#MainContent_txt_achievementyear").val(),
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                "aoColumns": [{
                    "mData": "Jan"
                }, {
                    "mData": "Feb"
                }, {
                    "mData": "Mar"
                }, {
                    "mData": "Apr"
                }, {
                    "mData": "May"
                }, {
                    "mData": "Jun"
                }, {
                    "mData": "Jul"
                }, {
                    "mData": "Aug"
                }, {
                    "mData": "Sep"
                }, {
                    "mData": "Oct"
                }, {
                    "mData": "Nov"
                }, {
                    "mData": "Dec"
                }],
                "aoColumnDefs": [{
                    "fnRender": function (oObj) {
                        if (oObj.aData["Jan"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('1', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["Jan"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('1', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('1', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [0]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["Feb"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('2', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["Feb"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('2', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('2', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [1]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["Mar"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('3', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["Mar"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('3', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('3', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [2]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["Apr"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('4', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["Apr"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('4', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('4', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [3]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["May"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('5', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["May"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('5', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('5', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [4]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["Jun"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('6', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["Jun"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('6', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('6', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [5]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["Jul"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('7', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["Jul"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('7', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('7', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [6]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["Aug"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('8', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["Aug"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('8', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('8', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [7]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["Sep"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('9', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["Sep"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('9', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('9', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [8]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["Oct"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('10', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["Oct"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('10', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('10', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [9]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["Nov"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('11', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["Nov"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('11', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('11', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [10]
                }, {
                    "fnRender": function (oObj) {
                        if (oObj.aData["Dec"] == 'True') {
                            return "<a href=\"#\" onclick=\"Detail('12', 'True')\"><img src='../images/check.png' /></a>"
                        } else if (oObj.aData["Dec"] == 'Wait') {
                            return "<a href=\"#\" onclick=\"Detail('12', 'Wait')\"><img src='../images/question.png' /></a>"
                        } else {
                            return "<a href=\"#\" onclick=\"Detail('12', 'False')\"><img src='../images/cross.png' /></a>"
                        }
                    },
                    "aTargets": [11]
                }, {
                    "sClass": "center",
                    "aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
                }, ]
            });
        }
    });

    function FileListRender(file) {
        document.getElementById("listfile").innerHTML = "";
        for (i = 0; i < file.length; i++) {
            if (!document.getElementById && !document.createElement) return false;
            var fileList = document.getElementById("listfile");
            if (!fileList) return false;

            if (!FileListRender.lastAssignedId) FileListRender.lastAssignedId = 100;

            var filename = file[i].DocumentFileName.split("/");

            fileList.innerHTML += '<div id="filelist' + FileListRender.lastAssignedId + '"><a href="#" id="filename' + FileListRender.lastAssignedId + '" onclick=GetAttachment("' + file[i].DocumentFileName + '")>' + filename[filename.length - 1] + '</a></div>'

            FileListRender.lastAssignedId++;
        }
    }

    function GetAttachment(file) {
        document.location = file;
        return false;
    }

    function Detail(month, state) {
        $("#MainContent_txt_month").val(ConvertSelectedMonthName(month));
        $("#MainContent_txt_monthnumber").val(month);
        $("#MainContent_State").val(state);

        if (state == 'False') {
            $("#MainContent_btn_save").hide();
        }
        if (state == 'Wait') {
            $("#fileupload").hide();
            $("#addfile").hide();
            $("#listfile").show();
            $("#MainContent_ddl_statusbyuser").hide();
            $("#MainContent_txt_statusbyuser").show();
            $("#MainContent_txt_realization").attr("disabled", "disabled");
            $("#MainContent_txt_realizationmonth").attr("disabled", "disabled");

            $.ajax({
                "dataType": 'json',
                "type": "GET",
                "url": "../Serializer/KPIAchievementSerializer.ashx?KPIAssign=" + $("#MainContent_KPIAssign").val() + "&Year=" + $("#MainContent_txt_achievementyear").val() + "&Month=" + month + "&User=" + $("#txt_user").val(),
                "success": function (data) {
                    $("#MainContent_txt_realization").val(data.result.Realization);
                    $("#MainContent_txt_realizationmonth").val(data.result.Realization);
                    $("#MainContent_txt_realizationmonthtext").val(data.result.Realization);
                    $("#MainContent_txt_statusbyuser").val(data.result.StatusByUser.Description);
                    $("#MainContent_txt_score").val(data.result.Score);
                    $("#MainContent_txt_scoreval").val(data.result.Score);
                    $("#MainContent_txt_remark").val(data.result.Notes);
                    FileListRender(data.attachment);

                    $("#form1 td input[type='checkbox']").each(function () {
                        var $cb = $(this);
                        if ($cb.attr('id') == 'MainContent_chk_locked') {
                            if (data.result.isLocked.toString() == 'true') $cb.prop('checked', true);
                            else $cb.prop('checked', false);
                        }
                    });

                    if (data.isVerificator) {
                        $("#MainContent_ddl_statusbyverificator").removeAttr("disabled");
                        $("#MainContent_ddl_statusbyverificator").show();
                        $("#MainContent_txt_statusbyverificator").hide();
                        //$("#MainContent_txt_score").removeAttr("disabled");
                        $("#MainContent_txt_realization").removeAttr("disabled");
                        $("#MainContent_txt_realizationmonth").removeAttr("disabled");
                        $("#MainContent_txt_remark").removeAttr("disabled");

                        $("#MainContent_btn_save").show();
                        $("#btn_count").show();
                    } else {
                        $("#MainContent_btn_save").hide();
                        $("#btn_count").hide();
                    }

                },
                "error": function (data) {
                    alert('Error on getting achievement data');
                }
            });
        } else if (state == 'True') {
            $("#fileupload").hide();
            $("#addfile").hide();
            $("#listfile").show();
            $("#MainContent_ddl_statusbyuser").hide();
            $("#MainContent_txt_statusbyuser").show();
            $("#MainContent_ddl_statusbyverificator").hide();
            $("#MainContent_txt_statusbyverificator").show();

            $("#MainContent_ddl_statusbyverificator").attr("disabled", "disabled");
            //$("#MainContent_txt_score").attr("disabled", "disabled");
            $("#MainContent_txt_remark").attr("disabled", "disabled");
            $("#MainContent_txt_statusbyverificator").attr("disabled", "disabled");
            $("#MainContent_txt_realizationmonth").attr("disabled", "disabled");
            $("#MainContent_txt_realization").attr("disabled", "disabled");

            $.ajax({
                "dataType": 'json',
                "type": "GET",
                "url": "../Serializer/KPIAchievementSerializer.ashx?KPIAssign=" + $("#MainContent_KPIAssign").val() + "&Year=" + $("#MainContent_txt_achievementyear").val() + "&Month=" + month + "&User=" + $("#txt_user").val(),
                "success": function (data) {
                    $("#MainContent_txt_realization").val(data.result.Realization);
                    $("#MainContent_txt_realizationmonth").val(data.result.Realization);
                    $("#MainContent_txt_realizationmonthtext").val(data.result.Realization);
                    $("#MainContent_txt_statusbyuser").val(data.result.StatusByUser.Description);
                    $("#MainContent_txt_statusbyverificator").val(data.result.StatusByVerificator.Description);
                    $("#MainContent_txt_score").val(data.result.Score);
                    $("#mainContent_txt_scoreval").val(data.result.Score);
                    $("#MainContent_txt_remark").val(data.result.Notes);

                    $("#form1 td input[type='checkbox']").each(function () {
                        var $cb = $(this);
                        if ($cb.attr('id') == 'MainContent_chk_locked') {
                            if (data.result.isLocked.toString() == 'true') $cb.prop('checked', true);
                            else $cb.prop('checked', false);
                        }
                    });

                    FileListRender(data.attachment);
                },
                "error": function (data) {
                    alert('Error on getting achievement data');
                }
            });

            $("#btn_count").hide();
            $("#MainContent_btn_save").hide();
        }

        return false;
    }

    function ConvertSelectedMonthName(Month) {
        var Name = "";
        if (Month == 1) {
            Name = "January";
        } else if (Month == 2) {
            Name = "February";
        } else if (Month == 3) {
            Name = "March"
        } else if (Month == 4) {
            Name = "April"
        } else if (Month == 5) {
            Name = "May"
        } else if (Month == 6) {
            Name = "June"
        } else if (Month == 7) {
            Name = "July"
        } else if (Month == 8) {
            Name = "August"
        } else if (Month == 9) {
            Name = "September"
        } else if (Month == 10) {
            Name = "October"
        } else if (Month == 11) {
            Name = "November"
        } else if (Month == 12) {
            Name = "December"
        }
        return Name;
    }

    function InitPage() {
        $("#timeline").hide();
        $("#listfile").hide();
        $("#MainContent_txt_statusbyuser").hide();
        $("#MainContent_txt_statusbyverificator").hide();
        $("#MainContent_btn_save").hide();
        $("#btn_count").hide();
        ClearContent();

        $("#MainContent_txt_realization").attr("disabled", "disabled");
        $("#MainContent_txt_realizationmonth").attr("disabled", "disabled");
        $("#MainContent_ddl_statusbyuser").attr("disabled", "disabled");
        $("#MainContent_ddl_statusbyverificator").attr("disabled", "disabled");
        $("#MainContent_txt_remark").attr("disabled", "disabled");
        //$("#MainContent_txt_score").attr("disabled", "disabled");
        $("#MainContent_fileattachment").attr("disabled", "disabled");
        $("#btn_addfile").attr("disabled", "disabled");
    }

    function ClearContent() {
        $("#MainContent_State").val('');
        $("#MainContent_txt_month").val('');
        $("#MainContent_txt_monthnumber").val('');
        $("#MainContent_txt_realization").val('');
        $("#MainContent_txt_realizationmonth").val('');
        $("#MainContent_txt_realizationmonthtext").val('');
        $("#MainContent_txt_score").val('');
        $("#MainContent_txt_scoreval").val('');
        $("#MainContent_txt_remark").val('');
    }

    function ShowAttachments(KPIID)
    {
        var winFeature = "dialogHeight:500;dialogWidth:1000;center:yes;resizeable:no;scroll:yes";
        window.showModalDialog("../Tools/ShowAttachments/ShowAttachments.aspx?KPI=" + KPIID + "&User=" + $("#txt_user").val() + "&Year=" + $("#MainContent_txt_achievementyear").val(), null, winFeature);
    }
</script>
<style>
    .fg-toolbar{display: none;}
    .ui-datepicker-calendar {display: none;}
</style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <form id="formInputaVerification" action="VerificatePage.aspx">
        <div>
            <div class="customPageTitle">KPI Information</div><br />
            <div class="customPageContent">
                <table width="100%">
                    <tr>
                        <td width="50%">
                            <table>
                                <tr>
                                    <td width="140px">Description</td>
                                    <td class="Separator">:</td>
                                    <td><asp:TextBox ID="txt_kpidescription" runat="server" ReadOnly="true" class="longText"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td width="140px">Group</td>
                                    <td>:</td>
                                    <td><asp:TextBox ID="txt_kpigroup" runat="server" ReadOnly="true" class="longText"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td width="140px">Category</td>
                                    <td>:</td>
                                    <td><asp:TextBox ID="txt_kpicategory" runat="server" ReadOnly="true" class="longText"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td width="140px">Type</td>
                                    <td>:</td>
                                    <td><asp:TextBox ID="txt_kpitype" runat="server" ReadOnly="true" class="longText"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td width="140px">Sub Type</td>
                                    <td>:</td>
                                    <td><asp:TextBox ID="txt_kpisubtype" runat="server" ReadOnly="true" class="longText"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td width="140px">Year</td>
                                    <td>:</td>
                                    <td><asp:TextBox ID="txt_kpiyear" runat="server" ReadOnly="true"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td width="140px">Periode</td>
                                    <td>:</td>
                                    <td><asp:TextBox ID="txt_kpiperiode" runat="server" ReadOnly="true"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Polarization</td>
                                    <td>:</td>
                                    <td>
                                        <asp:TextBox ID="txt_polarization" runat="server"></asp:TextBox>
                                    </td>
                                </tr>          
                                <tr>
                                    <td>Unit of Measure</td>
                                    <td>:</td>
                                    <td>
                                        <asp:TextBox ID="txt_kpiuom" runat="server" ReadOnly="true" class="longText"></asp:TextBox><input type="hidden" runat="server" id="txt_uomformat" />
                                    </td>
                                </tr>                
                                <tr>
                                    <td>UoM Max</td>
                                    <td>:</td>
                                    <td>
                                        <asp:TextBox ID="txt_kpiuommax" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                                    </td>
                                </tr>          
                                <tr>
                                    <td>UoM Min</td>
                                    <td>:</td>
                                    <td>
                                        <asp:TextBox ID="txt_kpiuommin" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:top">Detail Information</td>
                                    <td style="vertical-align:top">:</td>
                                    <td><asp:TextBox ID="txt_detailinformation" runat="server" ReadOnly="true" TextMode="MultiLine" CssClass="MultilineTextbox"></asp:TextBox></td>
                                </tr>              
                            </table>
                        </td>
                        <td width="50%">
                            <table>
                                <tr>
                                    <td width="140px">Target Description</td>
                                    <td class="Separator">:</td>
                                    <td>
                                        <asp:TextBox ID="txt_kpitargetdescription" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Manual Calculation</td>
                                    <td>:</td>
                                    <td><asp:TextBox ID="txt_kpimanualcalculation" runat="server" ReadOnly="true"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Calculation Type</td>
                                    <td>:</td>
                                    <td>
                                        <asp:TextBox ID="txt_calculationtype" runat="server" ReadOnly="true"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Weight</td>
                                    <td>:</td>
                                    <td><asp:TextBox ID="txt_weight" runat="server" ReadOnly="true"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>KPI Parent</td>
                                    <td>:</td>
                                    <td>
                                        <asp:TextBox ID="txt_kpiparent" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>KPI Replacement</td>
                                    <td>:</td>
                                    <td>
                                        <asp:TextBox ID="txt_kpireplacement" runat="server" ReadOnly="true" class="longText"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Replacement Date</td>
                                    <td>:</td>
                                    <td><asp:TextBox ID="txt_replacementdate" runat="server" ReadOnly="true"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Replacement Desc.</td>
                                    <td>:</td>
                                    <td><asp:TextBox ID="txt_replacementdescription" runat="server" ReadOnly="true" class="longText"></asp:TextBox></td>
                                </tr>
                                <tr>
                                    <td>Weight Enable Flag</td>
                                    <td>:</td>
                                    <td>
                                        <asp:CheckBox ID="chk_weightenableflag" runat="server" Enabled="false"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>UoM Enable Flag</td>
                                    <td>:</td>
                                    <td>
                                        <asp:CheckBox ID="chk_uomenableflag" runat="server" Enabled="false"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td>is Active</td>
                                    <td>:</td>
                                    <td><asp:CheckBox ID="chk_active" runat="server" Enabled="false"/></td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:top">Strategic Objective</td>
                                    <td style="vertical-align:top">:</td>
                                    <td><asp:TextBox ID="txt_strategicobjective" runat="server" ReadOnly="true" TextMode="MultiLine" CssClass="MultilineTextbox"></asp:TextBox></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div><br />

            <div id="div_child">
                <div class="customPageTitle">KPI Childs</div><br />
                <div class="ui-widget-content">
                    <table cellpadding="0" cellspacing="0" class="display" id="KPIChildTable">
                        <thead>
                            <tr>
                                <th>
                                    No
                                </th>
                                <th>
                                    Description
                                </th>
                                <th>
                                    isActive
                                </th>
                                <th>
                                    Group
                                </th>
                                <th>
                                    Category
                                </th>
                                <th>
                                    Type
                                </th>
                                <th>
                                    Sub Type
                                </th>
                                <th>
                                    Periode
                                </th>
                                <th>
                                    Attachments
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>       
                </div>
            </div>
            <br />

            <div class="customPageTitle">KPI Achievement</div><br />
            <div style="margin:5px 5px 5px 5px">
                Achievement Year    : <asp:TextBox ID="txt_achievementyear" runat="server" ReadOnly="true" class="mandatory"></asp:TextBox><br />
                <input type="hidden" id="KPI" runat="server" /><input type="hidden" id="KPIAssign" runat="server" /><input type="hidden" id="KPIAssignDetail" runat="server" /><input type="hidden" id="State" runat="server" />
            </div>
            <div class="ui-widget-content">
                <table cellpadding="0" cellspacing="0" class="display" id="timeline">
                    <thead>
                        <tr>
                            <th>
                                Jan
                            </th>
                            <th>
                                Feb
                            </th>
                            <th>
                                Mar
                            </th>
                            <th>
                                Apr
                            </th>
                            <th>
                                May
                            </th>
                            <th>
                                Jun
                            </th>
                            <th>
                                Jul
                            </th>
                            <th>
                                Aug
                            </th>
                            <th>
                                Sep
                            </th>
                            <th>
                                Oct
                            </th>
                            <th>
                                Nov
                            </th>
                            <th>
                                Dec
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>       
            </div><br />
            <div class="customPageContent">
                <table width="100%">
                    <tr>
                        <td width="50%">
                            <table>
                                <tr>
                                    <td width="140px">Month</td>
                                    <td class="Separator">:</td>
                                    <td><asp:TextBox ID="txt_month" runat="server" ReadOnly="true" class="mandatory"></asp:TextBox><input type="hidden" id="txt_monthnumber" runat="server" /></td>
                                </tr>
                                <tr>
                                    <td width="140px">Realization</td>
                                    <td>:</td>
                                    <td>
                                        <asp:TextBox ID="txt_realization" runat="server" Enabled="false" class="mandatory"></asp:TextBox>
                                        <asp:TextBox ID="txt_realizationmonth" runat="server" class="mandatory date-picker"></asp:TextBox>
                                        <input type="hidden" id="txt_realizationmonthtext" runat="server" />
                                    </td>
                                </tr>
                                <tr>
                                    <td width="140px">Attachment</td>
                                    <td>:</td>
                                    <td>
                                        <div id="listfile">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="140px">Status By User</td>
                                    <td>:</td>
                                    <td>
                                        <asp:DropDownList ID="ddl_statusbyuser" runat="server" Enabled="false"></asp:DropDownList>
                                        <asp:TextBox ID="txt_statusbyuser" runat="server" Enabled="false"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>is Locked</td>
                                    <td>:</td>
                                    <td><asp:CheckBox ID="chk_locked" runat="server" Enabled="false"/></td>
                                </tr>
                            </table>
                        </td>
                        <td width="50%">
                            <table>
                                <tr>
                                    <td width="140px">Score</td>
                                    <td class="Separator">:</td>
                                    <td><asp:TextBox ID="txt_score" runat="server" class="mandatory"></asp:TextBox>&nbsp;<input type="button" id="btn_count" value="Count"/><input type="hidden" runat="server" id="txt_scoreval"></td>
                                </tr>
                                <tr>
                                    <td width="140px">Status By Verificator</td>
                                    <td>:</td>
                                    <td>
                                        <asp:DropDownList ID="ddl_statusbyverificator" runat="server" Enabled="false"></asp:DropDownList>
                                        <asp:TextBox ID="txt_statusbyverificator" runat="server"></asp:TextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="vertical-align:top">Remark</td>
                                    <td style="vertical-align:top">:</td>
                                    <td><asp:TextBox ID="txt_remark" runat="server" TextMode="MultiLine" CssClass="MultilineTextbox" Enabled="false"></asp:TextBox></td>
                                </tr>              
                            </table>
                        </td>
                    </tr>
                </table>
            </div><br />

        <button id="btn_save" class="ui-button ui-corner-all ui-button ui-state-default ui-button-text-icon-primary" runat="server" name="btnSave" onserverclick="SaveAction">
            <span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
            <label class="ui-button-text">
                Save</label>
        </button>

        <button id="btn_back" class="ui-button ui-corner-all ui-button ui-state-default ui-button-text-icon-primary">
            <span class="ui-button-icon-primary ui-icon ui-icon-arrowthick-1-w"></span>
            <label class="ui-button-text">
                Back</label>
        </button>
        </div>
    </form>

</asp:Content>
